<template>
  <div class="top-bar">
    <div class="announcement animate">
      <i class="fas fa-bell"></i>
      <span>{{ announcement.title }}：{{ announcement.content }}</span>
      <button class="close-btn" @click="closeAnnouncement">
        <i class="fas fa-times"></i>
      </button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useAppStore } from '../stores/appStore'

// 使用Pinia状态
const appStore = useAppStore()
const { announcement, closeAnnouncement } = appStore
</script>

<style scoped lang="scss">
.top-bar {
  background: var(--deep-blue);
  color: var(--white);
  padding: 8px 0;
  font-size: 14px;
  text-align: center;
  
  .announcement {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 4px 16px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    
    i {
      color: var(--accent-teal);
      animation: pulse 1.5s infinite;
    }
    
    .close-btn {
      margin-left: 15px;
      background: transparent;
      border: none;
      color: rgba(255, 255, 255, 0.7);
      cursor: pointer;
      transition: var(--transition);
      
      &:hover {
        color: var(--white);
      }
    }
  }
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}
</style>
